<template>
    <div class="TemBG">
        <div class="Tittle">
            <div>
                <el-input v-model="userInput" :prefix-icon="Search" class="el_input" placeholder="请输入内容"></el-input>
                <el-button @click="getList" class="el_button_primary" type="primary">查询</el-button>
            </div>
            <div>
                <el-button @click="delList(delListID)" :icon="Delete" class="el_button_danger"
                    type="danger">删除选中内容</el-button>
                <el-button @click="userInput = ''; getList()" :icon="Refresh" class="el_button_primary"
                    type="primary">&nbsp;&nbsp;刷新列表&nbsp;&nbsp;</el-button>
                <el-button @click="addFlag = true; getFatherID()" :icon="Plus" class="el_button_success"
                    type="success">&nbsp;&nbsp;添加内容&nbsp;&nbsp;</el-button>
            </div>
        </div>
        <div class="Content">
            <el-table @selection-change="dealDelList" class="el_table" :data="AllList" stripe table-layout="fixed">
                <el-table-column type="selection" width="55" />
                <el-table-column min-width="30" prop="id" align="center" label="内容id" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="link" label="链接地址">
                    <template #default="scope">
                        <a class="alink" :href=scope.row.link target="_blank">{{ scope.row.link }}</a>
                    </template>
                </el-table-column>
                <el-table-column min-width="30" prop="parentDirectory[name]" label="归属的一级目录" />
                <el-table-column min-width="30" align="center" label="操作">
                    <template #default="scope">
                        <div style="display: flex; gap: 10px; justify-content: center;">
                            <el-button @click="delList(scope.row.id)" :icon="Delete" circle class="el_button_danger"
                                type="danger">
                            </el-button>
                            <el-button
                                @click="changeFlag = true; changeID = scope.row.id; changeFather = scope.row.parentDirectory['id']; changeName = scope.row.title;changeLink = scope.row.link; getFatherID()"
                                :icon="Edit" circle style="margin-left: 0;" class="el_button_primary" type="primary">
                            </el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="Footer">
            <el-pagination @change="changePage" class="el_pagination" :default-page-size="NowLength"
                :page-sizes="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="SumLength" />
        </div>
    </div>
    <el-dialog @close="closeDialog" title="新建一级目录内容" class="el_dialog" v-model="addFlag" width="500" align-center>
        <div class="dialogBorder">
            <el-select placeholder="请选择一级目录归属" v-model="addFather" class="el_select">
                <el-option v-for="(item, index) in FatherList" :key="index" :value="item.id"
                    :label="item.name"></el-option>
            </el-select>
            <el-input v-model.trim="addName" class="el_input" placeholder="请输入网站名称"></el-input>
            <el-input v-model.trim="addLink" class="el_input" placeholder="请输入网站链接"></el-input>
            <div class="dialogButton">
                <el-button type="danger" class="el_button_danger" @click="closeDialog">取消</el-button>
                <el-button type="primary" class="el_button_primary" @click="addList">确定</el-button>
            </div>
        </div>
    </el-dialog>
    <el-dialog @close="closeDialog" title="修改一级目录内容" class="el_dialog" v-model="changeFlag" width="500" align-center>
        <div class="dialogBorder">
            <el-select placeholder="请选择一级目录归属" v-model="changeFather" class="el_select">
                <el-option v-for="(item, index) in FatherList" :key="index" :value="item.id"
                    :label="item.name"></el-option>
            </el-select>
            <el-input v-model.trim="changeName" class="el_input" placeholder="请输入网站名称"></el-input>
            <el-input v-model.trim="changeLink" class="el_input" placeholder="请输入网站链接"></el-input>
            <div class="dialogButton">
                <el-button type="danger" class="el_button_danger" @click="closeDialog">取消</el-button>
                <el-button type="primary" class="el_button_primary" @click="changeList">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup lang='js' name=''>
import { Search, Delete, Refresh, Plus, Edit } from '@element-plus/icons-vue'
import Ciallo2API from '@/api/main/ResourceControl/Ciallo2';
import { ref } from 'vue'
import showMessage from '@/utils/showMessage';

const addFlag = ref(false)
const addFather = ref("")
const addName = ref("")
const addLink = ref("")

const changeFlag = ref(false)
const changeFather = ref("")
const changeName = ref("")
const changeLink = ref("")
const changeID = ref("")

const FatherList = ref("")
// 聊天记录列表
const AllList = ref([])
// 总条数
const SumLength = ref(0)
// 模糊查询内容
const userInput = ref('')
// 分页控制
const PageSize = [20, 50, 100, 150, 200]
const NowLength = ref(20)
const NowIndex = ref(1)
function changePage(a, b) {
    NowIndex.value = a
    NowLength.value = b
    getList()
}

// 获取主列表
async function getList() {
    const res = await Ciallo2API(0, NowIndex.value - 1, NowLength.value, userInput.value)
    if (res.data) {
        AllList.value = res.data.data
        SumLength.value = res.data.count
        showMessage("刷新成功", "success")
    }
}
getList()

// 删除列表处理
const delListID = ref("")
function dealDelList(e) {
    let mess = ""
    e.forEach(element => {
        mess = mess + element.id + ","
    });
    mess.slice(0, -1)
    delListID.value = mess.slice(0, -1)
}
// 删除列表
async function delList(id) {
    if (id) {
        const res = await Ciallo2API(3, id)
        if (res.data.code == 200) {
            showMessage("删除成功", "success")
            getList()
            delListID.value = ""
        } else {
            showMessage("删除失败")
        }
    } else {
        showMessage("未选中任何内容")
    }
}
// 更改列表
async function changeList() {
    if (changeName.value&&changeLink.value) {
        const res = await Ciallo2API(2, changeID.value, changeFather.value, changeName.value, changeLink.value)
        if (res.data.code == 200) {
            showMessage("修改成功", "success")
            getList()
            closeDialog()
        } else {
            showMessage("修改失败")
        }
    } else {
        showMessage("请输入内容")
    }
}
// 添加列表
async function addList() {
    if (addFather.value) {
        if (addName.value && addLink.value) {
            const res = await Ciallo2API(1, addFather.value, addName.value, addLink.value)
            if (res.data.code == 200) {
                showMessage("添加成功", "success")
                getList()
                closeDialog()
            } else {
                showMessage("添加失败")
            }
        } else {
            showMessage("请输入内容")
        }
    } else {
        showMessage("请选择一级目录归属")
    }
}

function closeDialog() {
    addFlag.value = false
    addName.value = ""
    addLink.value = ""
    addFather.value = ""
    changeFlag.value = false
    changeName.value = ""
    changeLink.value = ""
    changeFather.value = ""
    changeID.value = ""
}

async function getFatherID() {
    const res = await Ciallo2API(4)
    FatherList.value = res.data
}
</script>

<style scoped>
/* 主体框架 */
.TemBG {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.TemBG>*:nth-child(2) {
    flex: 1;
}

/* 头部 */
.Tittle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
}

.Tittle>* {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* 内容 */
.Content {
    position: relative;
}

.Content>* {
    width: 100%;
    height: 100%;
    position: absolute;
}

/* 底部 */
.Footer {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}


.dialogBorder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dialogButton {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.dialogButton>* {
    flex: 1;
}

.alink {
    text-decoration: none;
    color: rgb(15, 143, 255);
}
</style>